<script setup>
import { useRouter} from "vue-router";
import { useUserStore } from "../store/user.js";

const userStore = useUserStore()
const baseUrl = 'http://127.0.0.1:8000'
const Img = baseUrl+userStore.userInfo.image
const router = useRouter();
const handleCommand = (command) => {
  console.log(command);
  if (command === 'logout'){
    console.log('退出登录');
    userStore.setUser('')
    userStore.login(false)
    router.push('/login');
  }
  if (command === 'info'){
    console.log('个人信息');
    router.push('/info');
  }
};

</script>

<template>
  <el-row>
    <el-col :span="22" class="breadcrumb-container">
      <div class="flex gap-2">
        <el-tag type="primary" size="large">欢迎您:{{userStore.userInfo.username}}</el-tag>
      </div>
    </el-col>
    <el-col :span="2" class="login">
      <el-dropdown @command="handleCommand">
        <el-avatar :src="Img"></el-avatar>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="info">个人信息</el-dropdown-item>
            <el-dropdown-item command="logout">退出</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </el-col>
  </el-row>
</template>

<style scoped>
.login {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.el-avatar {
  margin-top: 5px;
}

.breadcrumb-container {
  display: flex;
  align-items: center; /* 垂直居中 */
  height: 100%; /* 确保容器高度足够 */
}

.el-breadcrumb {
  line-height: 40px; /* 根据需要调整行高 */
}
.gap-2{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
}
</style>
